<template>
  <view class="card-container">
    <view class="number-title flex justify-between">
      <view class="left-area">
        <image
          @tap="onEdit"
          class="tool-button"
          mode="widthFix"
          src="../../static/card/edit.png"
        />
      </view>
      <view class="right-area">
        <image
          @tap="onDelete"
          class="tool-button"
          mode="widthFix"
          src="../../static/card/close.png"
        />
      </view>
    </view>
    <view class="number-content flex">
      <view class="top flex justify-start">
        <view class="label">选号：</view>
        <view class="number-wrapper grid col-11">
          <view
            class="number-item"
            :class="numbers.length < 10 ? 'big-one' : ''"
            v-for="(number, index) in numbers"
            :key="index"
          >
            {{ number }}
          </view>
        </view>
      </view>
      <!-- <view class="bottom flex justify-start" v-if="counts.length > 0">
        <view class="label">开出个数：</view>
        <view class="count-wrapper grid col-11">
          <view
            class="count-item"
            :class="counts.length < 10 ? 'big-one' : ''"
            v-for="(count, index) in counts"
            :key="index"
          >
            {{ count }}
          </view>
        </view>
      </view> -->
      <view class="bottom">
        <view class="rule-item" v-if="counts.length > 0">
          开出个数：{{ counts.map(e => e + '个').join(',') }}
        </view>
      </view>
      <!-- <view class="bottom last-bottom">
        <view class="rule-item" v-for="(rule, index) in rules" :key="index">
          {{ rule.name }}：{{ rule.value }}
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0,
    },
    numbers: {
      type: Array,
      default: () => {
        return []
      },
    },
    counts: {
      type: Array,
      default: () => {
        return []
      },
    },
    rules: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  methods: {
    onDelete() {
      this.$emit('delete', this.index)
    },
    onEdit() {
      this.$emit('edit', this.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.card-container {
  width: 694upx;
  margin: 28upx;
  background-color: #f9faff;
  border-radius: 20upx;
  .number-title {
    background-color: #ffffff;
    padding: 28upx 30upx;
    border-radius: 20upx 20upx 0 0;
    .left-area {
      .tool-button {
        width: 28upx;
        height: 28upx;
      }
    }
    .right-area {
      .tool-button {
        width: 28upx;
        height: 28upx;
      }
    }
  }
  .number-content {
    background-color: #ffffff;
    padding: 28upx 30upx;
    margin-top: 10upx;
    border-radius: 0 0 20upx 20upx;
    display: flex;
    flex-direction: column;

    .top {
      padding-bottom: 20upx;
      border-bottom: 1px solid #edeff6;
      .label {
        color: #71808a;
        font-size: 36upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 50upx;
      }
      .number-wrapper {
        .number-item {
          background-color: #da2626;
          width: 38upx;
          height: 38upx;
          display: inline-block;
          margin-right: 8upx;
          line-height: 38upx;
          border-radius: 21upx;
          color: #ffffff;
          text-align: center;
          font-size: 16upx;
          margin-top: 6upx;
          &.big-one {
            width: 50upx;
            height: 50upx;
            font-size: 20upx;
            line-height: 50upx;
            border-radius: 25upx;
            margin-top: 0upx;
          }
        }
      }
    }
    // .bottom {
    //   padding-bottom: 20upx;
    //   border-bottom: 1px solid #edeff6;
    //   .label {
    //     color: #71808a;
    //     font-size: 36upx;
    //     font-family: PingFangSC-Regular, PingFang SC;
    //     font-weight: 400;
    //     line-height: 50upx;
    //   }
    //   .count-wrapper {
    //     .count-item {
    //       background-color: #2999ff;
    //       width: 38upx;
    //       height: 38upx;
    //       display: inline-block;
    //       margin-right: 8upx;
    //       line-height: 38upx;
    //       border-radius: 10upx;
    //       color: #ffffff;
    //       text-align: center;
    //       font-size: 16upx;
    //       margin-top: 6upx;
    //       &.big-one {
    //         width: 50upx;
    //         height: 50upx;
    //         font-size: 20upx;
    //         line-height: 50upx;
    //         border-radius: 12upx;
    //         margin-top: 0upx;
    //       }
    //     }
    //   }
    // }

    .bottom {
      padding: 20upx 0 0 0;
      .rule-item {
        display: inline-block;
        margin-right: 20upx;
        font-size: 36upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 46px;
      }
      &.last-bottom {
        padding-top: 0;
      }
    }
  }
}
</style>
